<template>
  <div class="yd-tab-pane" v-show="show">
    <slot></slot>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, ref, watch } from "vue";
export default {
  name: "yd-tab-pane",
  props: {
    label: {
      type: [String, Number],
      default: ""
    },
    name: {
      type: [String, Number],
      default: ""
    }
  },
  setup(props, ctx) {
    let show = ref(false);
    const instance = getCurrentInstance();

    onMounted(() => {
      if (instance.parent.ctx.activeName == props.name) {
        show.value = true;
      }
    });

    watch(
      () => instance.parent.ctx.activeName,
      name => {
        if (props.name == name) {
          show.value = true;
        } else {
          show.value = false;
        }
      }
    );

    return {
      show
    };
  }
};
</script>

<style lang="scss" scoped>
.yd-tab-pane {
  width: 100%;
  min-height: 100px;
}
</style>